<!--
 * @file 带斑马纹表格
 * @author its-wild(https://gitee.com/its-wild)
 * @date 2021/12/03
-->
<template>
	<a-table
		class="ant-table-striped"
		:row-class-name="rowClassName"
		:bordered="bordered"
		size="middle"
		:row-key="rowKey"
		v-bind="$attrs"
	>
		<template #bodyCell="{column, text, record}">
			<slot name="bodyCell" :column="column" :text="text" :record="record"></slot>
		</template>
	</a-table>
</template>

<script>
	import {defineComponent} from 'vue'

	export default defineComponent({
		name: 'ItsTable',
		props: {
			rowClassName: {
				type: Function,
				default: (record, index) => (index % 2 === 1 ? 'table-striped' : null),
			},
			rowKey: {
				type: [String, Number],
				default: (record) => record.id,
			},
			bordered: {
				type: Boolean,
				default: true,
			},
		},
	})
</script>

<style scoped lang="less">
	.ant-table-striped :deep(.table-striped) td {
		background-color: #fafafa;
	}

	.ant-table-striped :deep(.ant-table-tbody) > tr.ant-table-row:hover > td {
		background: @its-hover-bg-color;
	}

	.ant-table-striped :deep(.ant-table-thead) > tr > th {
		background-color: rgba(24, 144, 255, 0.1);
	}
</style>
